<template>
    <div>
        <div class="six-action-container">
            <div style="padding: 1rem;" class="six-action-item" v-for="(v, i) in taskList" :key="i">
                <div class="bubble"
                    :style="{ backgroundImage: `url(${require('@/assets/index_bg/' + (i + 1) + '.png')})` }">
                    <div class="act-text">
                        <div class="title">
                            {{ v.label }}·待办
                        </div>
                        <div class="todo">
                            {{ v.value }}
                        </div>
                    </div>
                    <div class="bg-to" @click="toRoute(v.url)">更多☞</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { countXwUnDo as countUndo } from "@/api/stuCQS/good/apply";
import { isEmpty } from "@/api/helpFunc";
import { checkPermi } from "@/utils/permission";
export default {
    name: "xw-undo",
    data() {
        return {


            taskList: [
                {
                    label: "学务·评优评先审核",
                    name: "good",
                    value: 0,
                    url: "/stuGood/about-good/xw",
                },
                {
                    label: "学务·静湖之星审核",
                    name: "lake",
                    value: 0,
                    url: "/stuGood/about-lake/xw",
                },
                {
                    label: "学务·优秀毕业生审核",
                    name: "biye",
                    value: 0,
                    url: "/stuGood/good-graduate/xw",
                },
                {
                    label: "学务·困难认定审核",
                    name: "kn",
                    value: 0,
                    url: "/hard/pks/xw",
                },
                {
                    label: "学务·助学金审核",
                    name: "zx",
                    value: 0,
                    url: "/hard/zxj/xw",
                },
                {
                    label: "学务·宿舍管理审核",
                    name: "dms",
                    value: 0,
                    url: "/dormitory/stuDormitoryManage/work",
                },

                {
                    label: "学务·任务管理审核",
                    name: "rwgl",
                    value: 0,
                    url: "/task/todo",
                },
            ],


        }
    },
    created() {
        if (checkPermi(['home:xw:undo1'])) {
            this.countUndo();
        }
    },
    methods: {
        async countUndo() {
            let res = await countUndo();
            if (res.code == 200) {
                let data = [...res.data];
                this.taskList.map(x => {
                    let temp = data.filter(y => y.startsWith(x.name));
                    if (!isEmpty(temp)) {
                        let result = temp[0].split("-")[1];
                        x.value = result;
                    }
                });
            }
        },

        toRoute(url) {
            if (!isEmpty(url)) {
                this.$router.push(url);
            }
        },
    }

}
</script>

<style scoped lang="scss">
.six-action-container {
    display: flex;
    flex-wrap: wrap;
}

.six-action-item {
    flex-basis: 33.33%;
}

.bubble {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 170px;
    border-radius: 1rem;
    // background-image: linear-gradient(120deg, rgb(134, 233, 98) 0%, rgb(45, 175, 92) 100%);
    position: relative;
    background-size: cover;
    min-width: 250px;
}

.act-text {
    width: 100%;
    z-index: 2;
    margin: 1rem;


    .title {
        text-align: left;
        font-size: 1.25rem;
        color: #fff;
    }

    .todo {
        margin-top: 1rem;
        font-size: 6rem;
        color: #fff;
    }
}

.bg-to {
    cursor: pointer;
    z-index: 3;
    position: absolute;
    bottom: 5%;
    right: 3%;
    margin-top: 10px;
    color: white;
}

.six-action-item:hover,
.fast-act:hover {
    cursor: pointer;

    transform: scale(1.1);
}
</style>